<template>
  <div class="page J-member">
      <div class="J-member-tit">会员信息</div>
      <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
          <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
          <div class="weui-cell__bd">
            <input class="weui-input" type="text" v-model="userInfo.trueName" pattern="[0-9]*" placeholder="请输入姓名">
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd">
            <label class="weui-label">生日</label>
          </div>
          <div class="weui-cell__bd pl">
            <input class="weui-input" type="tel" v-model="userInfo.birthday" placeholder="请输入生日" id="datePicker" readonly @click="birthday">
            <div class="weui-cell__ft"></div>
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd">
            <label class="weui-label">发票</label>
          </div>
          <div class="weui-cell__bd">
            <input class="weui-input" type="text" v-model="userInfo.invoiceTitle" placeholder="请输入发票抬头">
          </div>
        </div>
      </div>
      <div class="J-button-subit">
        <a href="javascript:;" class="weui-btn weui-btn_primary" @click="submitFrom">提交</a>
      </div>
  </div>
</template>
<script>
  const weui = require('weui')
  import { mapGetters } from 'vuex'
  const util = require('~src/lib/util')
  export default {
    name: 'member',
    data () {
      return {
        birthdayVal: ''
      }
    },
    components: {

    },
    computed: {
      ...mapGetters({
        userInfo: 'getUserInfo'
      })
    },
    mounted () {
      var _this = this
      this.$nextTick(function () {
        if (util.isEmptyObject(_this.userInfo)) {
          _this.$store.dispatch('getUserInfo', {openid: util.localItem.get('openid')})
        }
      })
    },
    methods: {
      birthday () {
        var _this = this
        var birthday = _this.userInfo.birthday.split('-')
        weui.datePicker({
          start: 1940,
          end: new Date().getFullYear(),
          defaultValue: [2010,6,9],
          onConfirm: function (result) {
            _this.userInfo.birthday = result[0] + '-' + (parseInt(result[1])+1) + '-' +result[2]
          },
          id: 'datePicker'
        })
      },
      submitFrom () {
        var _this = this
        var config = {
          openid: util.localItem.get('openid'),
          userId: this.userInfo.userId,
          trueName: this.userInfo.trueName,
          invoiceTitle: this.userInfo.invoiceTitle,
          birthday: this.userInfo.birthday
        }
        if (util.isEmptyObject(this.userInfo.trueName)){
          _this.$store.commit('TOAST_SHOW', {content: '姓名不能为空', msg: true})
          return
        } else if (util.isEmptyObject(this.userInfo.birthday)){
          _this.$store.commit('TOAST_SHOW', {content: '生日不能为空', msg: true})
          return
        } else if (util.isEmptyObject(this.userInfo.invoiceTitle)){
          _this.$store.commit('TOAST_SHOW', {content: '发票不能为空', msg: true})
          return
        }

        console.log(util.isEmptyObject(this.userInfo.trueName))
        _this.$store.dispatch('changeUserInfo', config)
      }
    }
   }
</script>
<style lang="scss">
  .J-member{
    .J-member-tit{
      background-color:#FBF9FE;
      padding:6px 10px;
      font-size:14px;
    }
    .weui-cell__bd input{
      font-size:16px;
    }
    .weui-cells{
      margin-top:0;
    }
    .weui-cell:before{
      right:15px;
    }
  }
</style>
